import classnames from 'classnames'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useHistory } from 'react-router'
import { ReactElement } from 'react'
// import { withRouter } from 'react-router-dom'
// 1.withRouter的使用：history match location--是通过<Route/>路由配置得到的
// 自己渲染的组件无法得到路由信息

//2.路由提供几个和路由相关的hook
// useHistory useLocation useParams

/**
 * 顶部导航栏
 * @param {String} props.className 样式类
 * @param {JSX} props.children 是通过组件标签体传递的子元素，用于填充中间标题区域
 * @param {JSX} props.rightContent 是用于填充右侧区域的元素
 * @param {Function} props.onLeftClick 左侧后退按钮的点击事件监听函数
 * @returns
 */
type Props = {
  children: string | ReactElement
  rightContent?: string | ReactElement
  className?: string
  onLeftClick?: () => void
}

const NavBar = ({ className, children, rightContent, onLeftClick }: Props) => {
  const history = useHistory()
  const back = () => {
    if (onLeftClick) {
      onLeftClick()
    } else {
      // 返回上一页
      history.go(-1)
    }
  }
  return (
    <div className={classnames(styles.root, className)}>
      {/* 后退按钮 */}
      <div className="left">
        <Icon type="iconfanhui" onClick={back} />
      </div>

      {/* 居中标题 */}
      <div className="title">{children}</div>

      {/* 右侧内容 */}
      <div className="right">{rightContent}</div>
    </div>
  )
}

export default NavBar
// export default withRouter(NavBar)
